<template>
	<view v-if="pageShow" style="padding-bottom: 200rpx;">
		<!-- 赛事内容 -->
		<view class="mainpadding ffffff" v-if="type==1">
			<view class="flexbetween">
				<view class="shilitu">
					<image :src="dataAll.ss.image_text" mode=""></image>
				</view>
				<view class="" style="width: 69%;">
					<view class="flexleft">
						<view class="xiaolhbtn margin_right1" v-if="dataAll.ss.ss_status==1">未开始</view>
						<view class="xiaocbtn margin_right1" v-if="dataAll.ss.ss_status==2">报名中</view>
						<view class="xiaolabtn margin_right1" v-if="dataAll.ss.ss_status==3">待开赛</view>
						<view class="xiaojubtn margin_right1" v-if="dataAll.ss.ss_status==4">已开赛</view>
						<view class="xiaohbtn margin_right1" v-if="dataAll.ss.ss_status==5">赛事结束</view>
						<view class="titletext xiaohei fonweight yhxk">{{dataAll.ss.name}}</view>
					</view>
					<view class="strongtext xiaohui nofonweight margin_right2 margin_top2">赛事开始时间：{{dataAll.ss.bs_starttime_text}}</view>
					<view class="strongtext xiaohui nofonweight margin_right2 margin_top2">赛事结束时间：{{dataAll.ss.bs_endtime_text}}</view>
				</view>
			</view>
			<view class="margin_top strongtext xiaohui nofonweight margin_top2"><text class="titletext fonweight xiaohei">比赛地址：</text>{{dataAll.ss.cityinfo}}{{dataAll.ss.address}}</view>
		</view>
		<view class="mainpadding ffffff" v-if="type==2">
			<view class="flexbetween">
				<view class="shilitu">
					<image :src="dataAll.activity.image_text" mode=""></image>
				</view>
				<view class="" style="width: 69%;">
					<view class="flexleft">
						<view class="xiaolhbtn margin_right1" v-if="dataAll.activity.activity_status==1">未开始</view>
						<view class="xiaocbtn margin_right1" v-if="dataAll.activity.activity_status==2">报名中</view>
						<view class="xiaolabtn margin_right1" v-if="dataAll.activity.activity_status==3">待开赛</view>
						<view class="xiaojubtn margin_right1" v-if="dataAll.activity.activity_status==4">已开赛</view>
						<view class="xiaohbtn margin_right1" v-if="dataAll.activity.activity_status==5">赛事结束</view>
						<view class="titletext xiaohei fonweight yhxk">{{dataAll.activity.name}}</view>
					</view>
					<view class="strongtext xiaohui nofonweight margin_right2 margin_top2">赛事开始时间：{{dataAll.activity.bs_starttime_text}}</view>
					<view class="strongtext xiaohui nofonweight margin_right2 margin_top2">赛事结束时间：{{dataAll.activity.bs_endtime_text}}</view>
				</view>
			</view>
			<view class="margin_top strongtext xiaohui nofonweight margin_top2"><text class="titletext fonweight xiaohei">比赛地址：</text>{{dataAll.activity.cityinfo}}{{dataAll.activity.address}}</view>
		</view>
		<!-- 报名人数 -->
		<view class="ffffff mainpadding margin_top1">
			<view class="sanshis xiaohei fonweight">报名人数</view>
			<view class="ershiba xiaohei nofonweight margin_top">男：{{dataAll.man_num}}人，女{{dataAll.womam_num}}人</view>
		</view>
		<!-- 报名信息 -->
		<view class="ffffff mainpadding margin_top1">
			<view class="sanshis xiaohei fonweight">报名信息</view>
			<view class="flexbetween margin_top xiahuaxian">
				<view class="ershiba xiaohei nofonweight">姓名：</view>
				<view class="ershiba xiaohei nofonweight">{{dataAll.username}}</view>
			</view>
			<view class="flexbetween margin_top xiahuaxian">
				<view class="ershiba xiaohei nofonweight">手机号：</view>
				<view class="ershiba xiaohei nofonweight">{{dataAll.mobile}}</view>
			</view>
			<view class="flexbetween margin_top">
				<view class="ershiba xiaohei nofonweight">身份证号：</view>
				<view class="ershiba xiaohei nofonweight">{{dataAll.idcard}}</view>
			</view>
		</view>
		<template v-if="type==1">
			<view class="ffffff mainpadding margin_top1">
				<view class="sanshis xiaohei fonweight">参赛人</view>
				<view class="flexbetween" v-for="item in dataAll.ssbmuser" :key="item.id">
					<view class="flexleft">
						<image :src="item.user.avatar_text" class="headimg" mode=""></image>
						<view class="ershiba strongtext">{{item.user.ali_name}}</view>
					</view>
					<view class="xiaohei main_size">性别：<text class="xiaolv" v-show="item.user.gender==0">男</text><text class="xiaohong"v-show="item.user.gender==1">女</text></view>
				</view>
			</view>
		</template>
		<template v-if="type==2">
			<view class="ffffff mainpadding margin_top1">
				<view class="sanshis xiaohei fonweight">参赛人</view>
				<view class="flexbetween" v-for="item in dataAll.activitybmuser" :key="item.id">
					<view class="flexleft">
						<image :src="item.user.avatar_text" class="headimg" mode=""></image>
						<view class="ershiba xiaohei">{{item.user.ali_name}}</view>
					</view>
					<view class="xiaohei ershiba">性别：<text class="xiaolv" v-show="item.user.gender==0">男</text><text class="xiaohong"v-show="item.user.gender==1">女</text></view>
				</view>
			</view>
		</template>
		<!-- 支付方式 -->
		<view class="ffffff mainpadding margin_top1" v-if="type==1">
			<view class="sanshis xiaohei fonweight">支付方式</view>
			<!-- <view class="ershiba xiaohei nofonweight margin_top">已选择保险</view> -->
			<view class="flexbetween margin_top">
				<view class="ershiba xiaohei nofonweight">支付方式</view>
				<view class="ershiba xiaohei nofonweight">{{returnpayWay(dataAll.ssorder.pay_type)}}</view>
			</view>
		</view>
		<view class="ffffff mainpadding margin_top1" v-if="type==2">
			<view class="sanshis xiaohei fonweight">支付方式</view>
			<!-- <view class="ershiba xiaohei nofonweight margin_top">已选择保险</view> -->
			<view class="flexbetween margin_top">
				<view class="ershiba xiaohei nofonweight">支付方式</view>
				<view class="ershiba xiaohei nofonweight">{{returnpayWay(dataAll.activityorder.pay_type)}}</view>
			</view>
		</view>
		<!-- 固定底部 -->
		<view class="mainpadding margin_top flexcolumn ffffff gudingdb"  v-if="dataAll.is_cancel">
			<view class="ershil xiaohei nofonweight" v-if="systeminfo.cancel_sm">{{systeminfo.cancel_sm}}</view>
			<view class="margin_top2 bigbtn" @click="tzqxbm">取消报名</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				type: 1,//1赛事详情，2活动详情
				listid: "",
				dataAll:{},
				pageShow :false
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.type = options.type
			if (this.type == 1) {
				uni.setNavigationBarTitle({
					title: "赛事报名信息"
				});
			} else if (this.type == 2) {
				uni.setNavigationBarTitle({
					title: "活动报名信息"
				});
			}
			this.getDetail()
			this.system()
		},
		methods: {
			returnpayWay(val){
				// 10=微信,20=支付宝,30=余额支付,40=平台支付
				if(val==10)return "微信支付"
				if(val==20)return "支付宝支付"
				if(val==30)return "余额支付"
				if(val==40)return "平台支付"
			},
			system(){
				httpRequest.request('/api/index/getConfigInfo','GET',{}).then(res => {
					this.systeminfo = res.data
					this.pageShow = true
				})
			},
			getDetail(){
				let url = '/api/user/ssBmDetail'
				if (this.type == 2) {
					url = '/api/user/activityBmDetail'
				}
				httpRequest.request(url, 'GET', {
					id:this.listid
				}, false, false, true).then(res => {
					this.dataAll = res.data
				})
			},
			// 跳转取消报名
			tzqxbm() {
				uni.navigateTo({
					url: '/pages_mypage/quxiaosaishibm?id='+this.listid+"&type="+this.type
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.headimg{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 30rpx;
	}
	page {
		background-color: #F9F9F9;
	}
	.huisebtn {
		width: 140rpx;
		height: 56rpx;
		background: #F5F5F5;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #777777;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.lvsebtn {
		width: 140rpx;
		height: 56rpx;
		background: #1BA95B;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.xiaolabtn {
		width: 80rpx;
		height: 40rpx;
		background: #078CE6;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.xiaohbtn {
		width: 100rpx;
		height: 40rpx;
		background: #BAC3D5;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #091636;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.xiaolhbtn {
		width: 80rpx;
		height: 40rpx;
		background: #1BA95B;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.xiaojubtn {
		width: 80rpx;
		height: 40rpx;
		background: #F8B900;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.xiaocbtn {
		width: 80rpx;
		height: 40rpx;
		background: #F76222;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.shilitu {
		width: 200rpx;
		height: 160rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>